<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>{{$route.meta.title}}</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <div class="resource-label-container">
            <p class="title">{{$route.query.name}}</p>
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="form.keyword" :placeholder="$route.name !== 'LabelTemplateDetails' ? '标签名称/标签ID' : '模板名称/模板ID'"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="searchData">搜索</el-button>
                    <el-button @click="add" class="add-label">{{$route.name !== 'LabelTemplateDetails' ? "添加标签" : "添加模板"}}</el-button>
                    <el-button @click="goBack">返回</el-button>
                </el-form-item>
            </el-form>
            <el-table
                :data="tableData"
                v-show="tableData.length"
                class="pbb__table"
                header-cell-class-name="pbb__table-thead"
                cell-class-name="pbb__table-thead-cell"
                row-class-name="pbb__table-thead-row"
                style="width: 100%;">
<!--                <el-table-column-->
<!--                    prop="date"-->
<!--                    label="排序">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-input v-model="scope.row.sort"></el-input>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column
                    v-for="item in tableColumn"
                    :key="item.id"
                    :prop="item.prop"
                    :label="item.label"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="deleteData(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <ask-empty-text
                style="min-height: 400px;"
                v-if="tableData.length === 0">
            </ask-empty-text>
            <resource-add-popup ref="resourceAddPopup" :selectedData="allTableData" :popupTableColumn="popupTableColumn" :title="popupTitle" @saveData="saveData" />
        </div>
        <template v-slot:footer v-if="total > 0">
            <pagination :total="total" :page.sync="pageIndex" :limit.sync="pageSize"
                        @pagination="getTable"/>
        </template>
    </page-box>
</template>

<script lang="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";
import ResourceAddPopup from "@/components/add-resource-popup/index.vue";
import { buildCustomObj } from "@/utils";

@Component({
    name: "ResourceCategoryDetailNotAlive",
    components: {
        ResourceAddPopup
    }
})
export default class ResourceCategoryDetailNotAlive extends Vue {
    // 搜索条件
    form = {
        keyword: ""
    };

    // 弹框标题
    popupTitle = "";
    // 数据总数
    total = 0;
    // 每页数量
    pageSize = 10;
    // 当前页码
    pageIndex = 1;
    // 编辑前的名称
    oldName = "";
    // 表格数据
    tableData = [];

    // 页面表格表头
    tableColumn: { prop: string; label: string }[] = []

    // 弹框表格表头
    popupTableColumn: { prop: string; label: string }[] = []
    // 全部匹配数据，用做回显
    allTableData = []

    created() {
        if (this.$route.name === "CategoryResourceDetails") {
            this.popupTitle = "添加标签";
            this.tableColumn = [
                {
                    prop: "name",
                    label: "标签名称"
                },
                {
                    prop: "valueKindName",
                    label: "默认配置类型"
                },
                {
                    prop: "optionName",
                    label: "选项设置"
                }
            ];
            this.popupTableColumn = [
                {
                    prop: "name",
                    label: "标签名称"
                },
                {
                    prop: "departmentName",
                    label: "目前所属部门"
                },
                {
                    prop: "labelName",
                    label: "目前所属分类"
                }
            ];
        } else {
            this.popupTitle = "添加模板";
            this.tableColumn = [
                {
                    prop: "templateName",
                    label: "模板名称"
                },
                {
                    prop: "description",
                    label: "表格描述"
                }
            ];
            this.popupTableColumn = this.tableColumn;
        }
        this.getTable();
    }

    // 添加
    async add() {
        this.allTableData = [];
        const url = this.$route.name === "CategoryResourceDetails" ? "resource/other" : "moduleManage/list";
        const res = await this.$server[url]({
            data: {
                keyword: this.form.keyword,
                name: this.form.keyword,
                labelId: this.$route.query.labelId,
                pageSize: 99999,
                currentPage: 1
            }
        });
        if (res.data.code === 200) {
            this.allTableData = buildCustomObj(res.data.data.records, [...this.popupTableColumn, { prop: "id", name: "id" }]);
        }
        (this.$refs.resourceAddPopup as ResourceAddPopup).showDialog();
    };

    // 返回
    goBack() {
        this.$router.push({ path: "/resource-manage/category" });
    }

    // 点击查询
    searchData() {
        this.pageIndex = 1;
        this.getTable();
    };

    // 查询表格
    async getTable() {
        const url = this.$route.name === "CategoryResourceDetails" ? "resource/other" : "moduleManage/list";
        const res = await this.$server[url]({
            data: {
                keyword: this.form.keyword,
                name: this.form.keyword,
                labelId: this.$route.query.labelId,
                pageSize: this.pageSize,
                currentPage: this.pageIndex
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 删除
    deleteData(row: any) {
        this.$confirm('确定删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async() => {
            const res = await this.$server["resource/category/delete/template"]({
                data: {
                    labelId: this.$route.query.labelId,
                    relationId: row.id,
                    kind: this.$route.name === "CategoryResourceDetails" ? 2 : 1
                }
            });
            if (res.data.code === 200) {
                this.$message.success("操作成功!");
                await this.getTable();
            } else {
                this.$message.error(res.data.message || "接口请求错误!");
            }
        }).catch();
    }

    // 保存添加标签
    async saveData(data: any) {
        const res = await this.$server["resource/related/addName"]({
            data: {
                relationIds: data,
                labelId: this.$route.query.labelId,
                relationKind: this.$route.name === "CategoryResourceDetails" ? 2 : 1
            }
        });
        if (res.data.code === 200) {
            this.$message.success("操作成功!");
            (this.$refs.resourceAddPopup as ResourceAddPopup).closeDialog();
            this.getTable();
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 编辑名称
    editName(row: any) {
        this.oldName = row.name;
        row.show = !row.show;
        this.$nextTick(() => {
            (this.$refs[`ref${row.id}`] as any).$refs.input.focus();
        });
    }

    // 编辑框是去焦点
    inputBlur(row: any) {
        row.name = row.name ? row.name : this.oldName;
        row.show = !row.show;
        this.oldName = "";
    }

    // 查看资源所属维度
    detailResource() {
        this.$router.push({ path: "/resource-manage/category/resource-details" });
    }

    // 查看模板
    detailTemplate() {
        this.$router.push({ path: "/resource-manage/category/template-details" });
    }
}
</script>

<style scoped lang="scss">
.resource-label-container {
    .title {
        display: inline-block;
        font-size: 16px;
        margin: 0 0 5px 0;
        padding-bottom: 5px;
        border-bottom: 2px solid $password-confirm-prompt-text;
    }

    .add-label {
        margin-bottom: 10px;
    }

    .label-name {
        i {
            width: 12px;
            margin-left: 8px;
            cursor: pointer;
        }
    }
}
</style>
